<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#0481fe' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="消息中心"
				title-color="#fff"
				title-size="40"
				title-bold
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="list">
				<view class="no_msg" v-if="!list.length">
					<u-empty mode="message"></u-empty>
				</view>
				<view v-else class="list_item u-skeleton" v-for="(item, index) in list" :key="index" @click="handleItem(item.identification)">
					<view class="item_time">{{ item.back_time }}</view>
					<view class="item_content">
						<view class="item_title u-skeleton-rect">留言回复</view>
						<view class="item_dec u-line-2 u-skeleton-rect" :class="{ active: item.is_see == 2 }">{{ item.content }}</view>
					</view>
				</view>
			</view>
			<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
			<view class="fixedView"></view>
		</scroll-view>
	</view>
</template>

<script>
import ajax from '@/api'
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	data() {
		return {
			key: 0,
			page: 1,
			length: 10,
			loading: true,
			list: [
				{
					content: '哦口误无忧',
					back_time: '2021-12-07 15:16:23',
					reply: '',
					reply_time: '',
					state: 0,
					is_see: '',
					identification: 51
				}
			]
		}
	},
	components: {},
	filters: {
		allNumber(obj) {
			if (!obj.length) return 0
			return obj.map((item) => item.is_see == 1).length
		}
	},
	onShow() {
		this.init()
	},
	// 页面滚动监听
	// onPageScroll(e) {
	// 	this.pageScrollTop = Math.floor(e.scrollTop)
	// },
	methods: {
		async init() {
			try {
				const data = await ajax.getMessageList({ page: 1, length: 10 })
				this.list = data.row
				this.loading = false
			} catch (e) {
				this.loading = false
			}
		},
		handleItem(id) {
			uni.navigateTo({
				url: `/pages/msg/detail?id=${id}`
			})
		},
		handleBack() {
			uni.navigateBack()
		},
		async handleAllMsg() {
			if (!this.list.length) return
			uni.showLoading({
				title: '拼命加载中...',
				mask: true
			})
			try {
				await ajax.postMsgAll()
				uni.hideLoading()
				this.key = this.key++
			} catch (error) {
				uni.hideLoading()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.no_msg {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 80vh;
}
.fixedView {
	height: 30px;
}
.list {
	padding: 0 32rpx;
	.list_item {
		margin-top: 24rpx;
		.item_time {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			text-align: center;
			color: #bdbdbd;
		}
		.item_content {
			margin-top: 12rpx;
			padding: 28rpx 22rpx;
			background: #fff;
			box-shadow: 0px 6px 12px rgba(11, 137, 254, 0.08);
			border-radius: 16rpx;
			.item_title {
				width: 100rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3478f2;
			}
			.item_dec {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				min-height: 80rpx;
				color: #333333;
				margin-top: 6rpx;
			}
			.item_dec.active {
				color: #969799;
			}
		}
	}
}
</style>
